<template>
	<view class="container">
		<!-- 顶部用户信息栏 -->
		<view class="user-info">
			<view class="avatar"></view>
			<view class="user-text">
				<text class="name">姓名</text>
				<text class="account">账号</text>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuItemClick(index)">
				<text class="menu-text">{{item}}</text>
				<image class="arrow" src="/static/right-arrow.png"></image>
			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout" @click="handleLogout">
			<text class="logout-text">退出登录</text>
			<image class="arrow" src="/static/right-arrow.png"></image>
		</view>
	</view>
		<!--个人信息-->
	<!-- <view class="menu-list">
	    <view class="menu-item" 
	          v-for="(item, index) in menuItems" 
	          :key="index"
	          @click="handleMenuClick(index)">
	      <text class="menu-text">{{item}}</text>
	      <image class="arrow" src="/static/right-arrow.png"></image>
	    </view>
	</view> -->
	  
</template>

<script>
	export default {
		data() {
			return {
				menuItems: [
					"个人信息",
					"VIP升级",
					"每日免费",
					"翻译额度",
					"账号与安全",
					"联系客服"
				]
			}
		},
		methods: {
			handleMenuItemClick(index) {
				if(index === 0) { // 个人信息
					uni.navigateTo({
						url: '/pages/my/personalinfo',
						fail: (err) => {
						            console.error('跳转失败:', err)
						            uni.showToast({ title: '跳转失败', icon: 'none' })
						          }
					});
				}
				if(index === 1) { // VIP升级
				    uni.navigateTo({
				      url: '/pages/my/vip'
				    });
				  }
				if(index === 3) { // 翻译额度
				    uni.navigateTo({
				      url: '/pages/my/translationQuota'
				    });
				  }
				// 其他菜单项可以在这里添加对应的跳转逻辑
			},
			handleLogout() {
				// 退出登录逻辑
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// 这里添加实际的退出登录逻辑
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #eee;
		margin-right: 30rpx;
	}
	
	.user-text {
		display: flex;
		flex-direction: column;
	}
	
	.name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.account {
		font-size: 28rpx;
		color: #999;
	}
	
	.menu-list {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	.menu-item:active {
	  background-color: #f0f0f0;
	  transform: scale(0.98);
	}
	
	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		cursor:pointer;
		transition: all 0.3s;
	}
	
	.menu-text {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.logout {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
	}
	
	.logout-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #f00;
	}
	
	.arrow {
		width: 50rpx;
		height: 50rpx;
	}
</style>